<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>活动管理 - 管理员面板</title>
  <link rel="stylesheet" href="./../../static/manager/css/style.css">
    <script src="./../../static/manager/js/activity.js"></script>
</head>
<body>
	<header class="navbar">
		<div class="logo">AdminPanel</div>
		<h1>管理员控制面板</h1>
		<div class="user-info">
			<img src="/img/admin-avatar.jpg" alt="Admin Avatar" class="avatar">
			<span>管理员</span>
			<button class="logout-btn" id="logout-btn">退出</button>
		</div>
	</header>
	<aside class="sidebar">
		<ul>
			<li><a href="index.html">工作首页</a></li>
			<li><a href="activity.html">活动管理</a></li>
			<li><a href="class.html">教学班管理</a></li>
			<li><a href="student.html">学员管理</a></li>
			<li><a href="teacher.html">教师管理</a></li>
		</ul>
	</aside>

  <main>
  <section class="activity-management">
    <h2>活动管理</h2>
    <button onclick="openModal('create')">新增活动</button>
    <table>
      <thead>
        <tr>
          <th>活动ID</th>
          <th>活动名称</th>
          <th>活动类型</th>
          <th>活动标题</th>
          <th>创建者</th>
          <th>活动状态</th>
          <th>开始时间</th>
          <th>结束时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="activityTableBody">
        <!-- 动态生成的活动数据将填充在这里 -->
      </tbody>
    </table>
  </section>
</main>


  <!-- 弹窗 -->
<div id="data-modal" class="modal">
  <div class="modal-content">
    <span id="close-modal" class="close-btn">&times;</span>
    <h2 id="modal-title">新增活动</h2>
    <form id="data-form">
      <!-- 活动名称 -->
      <label for="name">活动名称：</label>
      <input type="text" id="name" name="name" required>

      <!-- 活动类型 -->
      <label for="category">活动类型：</label>
      <input type="text" id="category" name="category" required>

      <!-- 活动标题 -->
      <label for="title">活动标题：</label>
      <input type="text" id="title" name="title" required>

      <!-- 创建者 -->
      <label for="creator">活动创建者：</label>
      <input type="text" id="creator" name="creator" required>

      <!-- 活动开始时间 -->
      <label for="start_time">开始时间：</label>
      <input type="datetime-local" id="start_time" name="start_time" required>

      <!-- 活动结束时间 -->
      <label for="end_time">结束时间：</label>
      <input type="datetime-local" id="end_time" name="end_time" required>

      <div class="button-container">
        <button type="submit" id="save-data-btn">保存</button>
        <button type="button" id="cancel-btn" class="cancel-btn">取消</button>
      </div>
    </form>
  </div>
</div>


  <footer class="footer">
	<p>© 2024 AdminPanel, All Rights Reserved</p>
	<a href="/help">帮助</a> | <a href="/contact">联系我们</a>
	</footer>

</body>
</html>
